<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IM</title>
    <script src="jquery.js"></script>
    <style>

        body{
            background-color: #ccc;
        }

        .box1{
            width:400px;
            border:1px solid #ddd;
            padding:10px;
            height:600px;
            background-color: #fff;
            margin:auto;
            overflow: auto;
        }
        .phone{
            width:100%;
            overflow: hidden;
            word-break: break-all;
        }
        .info{
            padding:10px 0;
            overflow: hidden;
        }
        .name{
            clear: both;
            color:#ddd;
        }
        .text{
            clear:both;
            padding:5px;
            border-radius: 5px;
        }
        .left .name,.left .text{
            float:left;
        }
        .right .name,.right .text{
            float:right;
        }
        .left .text{
            background-color: #89cff0;
            color:#fff;
        }
        .right .text{
            background-color: #71A32A;
            color:#fff;
        }
        .sys{
            clear: both;
            text-align: center;
            padding:30px 0 15px;
        }
        .sys p{
            display: inline-block;
            padding:0;
            margin:0;
            font-size:14px;
            color:#fff;
            background-color: #ccc;
            padding:2px 10px;
            border-radius: 2px;
            text-align: center;
        }

        .box2{
            width:400px;
            margin:10px auto;
            background-color:#fff;
            padding:10px;
            border:1px solid #ddd;
        }
        input{
            font-size:14px;
            padding:5px;
            width:300px;
            outline: none;
            height:30px;
        }
        button{
            width:80px;
            font-size:14px;
            height:40px;
        }
        .inputbox{
            display: none;
        }

        .login{
            text-align: center;
            margin-top:250px;
        }

    </style>
</head>
<body>

<!--登录界面-->
<div class="login">
    <input id="name" type="text" placeholder="创建昵称，加入聊天室">
    <button id="enter">进入</button>
</div>


<!--聊天界面-->
<div class="inputbox">
    <div class="box1">
        <div class="phone">

        </div>
    </div>
    <div class="box2">
        <input id="socket_text" type="text">
        <button id="socket_send">发送</button>
    </div>
</div>


<script>


    //创建一个socket应用    new WebSocket('ws://127.0.0.1:2347');
    //方法：send() 发送消息  close() 关闭websocket应用
    //事件：onopen 打开socket时   onmessage 接收到消息时   onclose socket应用关闭时  onerror 发生错误时

    //课程目标：制作一个WEB版IM沟通工具

    //用户信息的载体
    var $userInfo = {
        "username":"",
        "content":"",
        "issys":0,
    };

    //登录、创建昵称
    $('#enter').on('click',function(){
        //收集用户名
//        var $name = $('#name').val();
        $userInfo.username = $('#name').val();
        if($userInfo.username == ''){
            alert('用户名或者昵称不能为空');
            return false;
        }


        //进入聊天界面
        $('.login').hide();
        $('.inputbox').show();

        //发送消息
        var socket = new  WebSocket('ws://gateway.weierban.top:8282');

        //打开socket应用  ，  同时发送一条用户登录的广播消息
        socket.onopen = function(){
            $userInfo.issys = 1;//标记为系统消息
            socket.send(JSON.stringify($userInfo));
        };

        //处理接收到的消息
        socket.onmessage = function(event){
            //返回的消息内容在事件对象（event）下的 data属性里
            var $data = JSON.parse(event.data);

            if($data.issys){
                $('.phone').append('<div class="sys"><p>系统消息：'+$data.username+'上线了。</p></div>');
            }else{
//                console.log(typeof $data);
//                $('.phone').append($data.username+':'+$data.content+'<br />');


//                if($userInfo.username==$data.username){
//                    $('.phone').append('<div class="info right"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
//                }else{
//                    $('.phone').append('<div class="info left"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
//                }

                if($userInfo.username!=$data.username){
                    $('.phone').append('<div class="info left"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
                }


            }


        };

        //点击消息发送按钮 向其他用户发送信息
        $('#socket_send').on('click',function(){

            $userInfo.issys = 0;

            $userInfo.content = $('#socket_text').val();

            $('.phone').append('<div class="info right"><div class="name">'+$userInfo.username+'</div><div class="text">'+$userInfo.content+'</div></div>');


            socket.send(JSON.stringify($userInfo));

            $('#socket_text').val('');

        });




        //如何显示在线成员？？？


    });






</script>
</body>
</html>